<!-- 订单列表 -->
<template>
  <div class="order-main">
    <!-- 订单搜索 -->
    <el-card shadow="never">
      <div slot="header">
        <span>订单查询</span>
      </div>
      <el-row>
        <el-col :span="6">
          <el-input v-model="search.username" placeholder="用户名查询" size="small" style="width:220px"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select v-model="search.status" placeholder="订单状态" size="small">
            <el-option v-for="(item,key) in orderStatusObj" :key="item" :label="item" :value="key" />
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-select v-model="search.statusend" placeholder="是否关闭" size="small">
            <el-option label="正在进行" value="0" />
            <el-option label="已关闭" value="1" />
          </el-select>
        </el-col>
        <el-col :span="6" style="text-align:right">
          <el-button type="default" @click="doReset" size="small">重置</el-button>
          <el-button type="primary" @click="doSearch" size="small">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 订单列表 -->
    <el-card>
      <el-table :data="orderListCom" border style="width: 100%" v-loading="loading">
        <el-table-column align="center" fixed label="#" width="60" type="index"></el-table-column>
        <el-table-column align="center" prop="username" label="用户账号" width="120"></el-table-column>
        <el-table-column align="center" prop="orderId" label="订单编号" width="180"></el-table-column>
        <el-table-column align="center" prop="addTime" label="添加时间" width="180"></el-table-column>
        <el-table-column align="center" prop="count" label="订单数量" width="80"></el-table-column>
        <el-table-column align="center" prop="price" label="订单金额" width="180">
          <template slot-scope="scope">{{"人民币:¥"+scope.row.price/100}}</template>
        </el-table-column>
        <el-table-column align="center" label="订单状态" width="120">
          <template slot-scope="scope">{{ scope.row.orderStatusText }}: {{ scope.row.orderStatus }}</template>
        </el-table-column>
        <el-table-column align="center" prop="payType" label="支付类型" width="120"></el-table-column>
        <el-table-column align="center" prop="statusend" label="是否关闭" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.statusend=='1'" style="color:red">已关闭</span>
            <span v-else style="color:green">正在进行</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="doneTime" label="完成时间" width="180"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleView(scope.row.orderId)" type="text" size="small">查看</el-button>
            <el-button
              type="text"
              size="small"
              style="color:red"
              @click="doDel(scope.row.orderId)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin:20px 0;float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalcount"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import orderApi from "@/api/order/index";
import _ from "lodash";
export default {
  data() {
    return {
      loading: false,
      search: {},
      value: "",
      orderList: [],
      orderStatusObj: {
        0: "未付款",
        1: "已付款",
        2: "已发货",
        3: "已收货",
        9: "申请退货",
      },
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30],
        totalcount: 0,
      },
    };
  },
  computed: {
    orderListCom() {
      var vm = this;
      this.orderList.forEach((item) => {
        item.orderStatusText = vm.orderStatusObj[item.orderStatus];
      });
      return this.orderList;
    },
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.loading = true;
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      params = _.pickBy(params, (item) => item);
      _.pickBy(params, function (v) {
        return v;
      });
      orderApi.orderList(params).then((res) => {
        this.orderList = res.data.list;
        this.page.totalcount = res.data.totalRow;
        this.loading = false;
      });
    },
    doReset() {
      //重置搜索信息
      this.search = {};
    },
    doSearch() {
      //搜索
      this.getOrderList();
      this.page.start = 1;
    },
    handleSizeChange(val) {
      (this.page.limit = val), this.getOrderList();
    },
    handleCurrentChange(val) {
      (this.page.start = val), this.getOrderList();
    },
    handleView(id) {
      this.$router.push({ name: "orderDetail", params: { id } });
    },
    doDel(id) {
      console.log(id);
      //删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          orderApi.orderDel({ id }).then((res) => {
            var index = this.orderList.findIndex((item) => {
              return item.id == id;
            });
            this.orderList.splice(index, 1);
            this.getOrderList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.order-main {
  .el-card {
    margin: 30px;
  }
}
</style>